<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 基本表单</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="favicon.ico">
<link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${ctx}/css/animate.css" rel="stylesheet">
<link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">

  <!-- 引入文件上传组件 webuploader 的样式 -->
    <link rel="stylesheet" type="text/css" href="${ctx}/js/plugins/webuploader/webuploader.css">
    
    <style type="text/css">
		.check-error{
			color:red
		}
	</style>
	
    <script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx}/js/jquery.form.js"></script>
    <script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${ctx}/js/content.min.js?v=1.0.0"></script>
    <script src="${ctx}/js/plugins/iCheck/icheck.min.js"></script>
    <script src="${ctx}/js/plugins/layer2.4/layer.js"></script>
    
    <!-- 引入日历插件js文件 -->
	<script src="${ctx}/js/layer/laydate/laydate.js"></script>
    
    <!-- 引入 文件上传组件 webuploader 的js -->
    <script src="${ctx}/js/plugins/webuploader/webuploader.js"></script>
    
    <!-- 引入 Jquery.validate.js 表单验证框架 -->
	<script src="${ctx}/js/jquery.validate.min.js"></script>
	<script src="${ctx}/js/messages_zh.min.js"></script>

<style type="text/css">
	.msgErrorStyle {
		background: red;
		font-size: 20px;
	}
</style>

   <script type="text/javascript">
 // 身份证正面
	jQuery(function() {
		
		//外部js调用,日期控件获取光标时候触发事件调用出日历
		laydate({
		elem : '#createtime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
		event : 'focus' //响应事件。如果没有传入event，则按照默认的click
	});
	
	laydate({
		elem : '#strtime', 
		event : 'focus' 
	});

	laydate({
		elem : '#fintime', 
		event : 'focus' 
	});
		
	    var $ = jQuery,
	        $list = $('#thelist1'), // thelist节点中添加文本  身份证正面  div添加  
	        $btn = $('#ctlBtn1'), // 文件上传按钮   身份证正面 文件上传按钮
	        state = 'pending',
	        uploader;

	    //初始化
	    uploader = WebUploader.create({
	        // 不压缩image
	        resize: false,

	        // 文件接收服务端。
	        server: "${ctx}/fileUpload.gzsxt",

	        // 选择文件的按钮。可选。
	        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	        	//开始上传 按钮的id 
	        pick: '#picker1' ,
	        
	     // 只允许选择图片文件。
	        accept: {
	            title: 'Images',
	            extensions: 'jpg,jpeg,bmp,png',
	            mimeTypes: 'image/*'
	        },
	        //允许上传的文件个数
	        fileNumLimit:1,
	        //单个文件最大的上传限制 1M
	        fileSingleSizeLimit : 1024 * 1024 // 1M
	    });

	    // 当有文件添加进来的时候
	    uploader.on( 'fileQueued', function( file ) {
	        $list.append( '<div id="' + file.id + '" class="item">' +
	            '<h4 class="info">' + file.name + '</h4>' +
	            '<p class="state">等待上传...</p>' +
	        '</div>' );
	    });

	    // 文件上传过程中创建进度条实时显示。
	    uploader.on( 'uploadProgress', function( file, percentage ) {
	        var $li = $( '#'+file.id ),
	            $percent = $li.find('.progress .progress-bar');

	        // 避免重复创建
	        if ( !$percent.length ) {
	            $percent = $('<div class="progress progress-striped active">' +
	              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
	              '</div>' +
	            '</div>').appendTo( $li ).find('.progress-bar');
	        }

	        $li.find('p.state').text('上传中');

	        $percent.css( 'width', percentage * 100 + '%' );
	    });

	    //文件上传成功后  触发的事件  触发一个回调函数
	    uploader.on( 'uploadSuccess', function( file,response) {
	      
	    	// 上传的图片保存的相对位置
	    	var idcard_url = response.msg;
	    	 $("#idcard_id1").append("<br><img  id='newimg'  src='${ctx}"+idcard_url+"' style='width: 150px;height: 150px' / >");
	    	 
	    	 //将url 添加到  form表单的隐藏域中
	    	 $("#annex").val(idcard_url);
	    	 
	    	$( '#'+file.id ).find('p.state').text('已上传');
	    });

	    uploader.on( 'uploadError', function( file ) {
	    	//TODO
	        $( '#'+file.id ).find('p.state').text('上传出错');
	    });

	    uploader.on( 'uploadComplete', function( file ) {
	        $( '#'+file.id ).find('.progress').fadeOut();
	    });

	    uploader.on( 'all', function( type ) {
	        if ( type === 'startUpload' ) {
	            state = 'uploading';
	        } else if ( type === 'stopUpload' ) {
	            state = 'paused';
	        } else if ( type === 'uploadFinished' ) {
	            state = 'done';
	        }

	        if ( state === 'uploading' ) {
	            $btn.text('暂停上传');
	        } else {
	            $btn.text('开始上传');
	        }
	    });
	    
	    //出错以后回调的函数
	    uploader.on("error",function(type){
	    	alert(type);
	    	if(type == "F_EXCEED_SIZE"){
	    		layer.alert('最大只能上传1M文件', {
	    			  skin: 'layui-layer-molv' //样式类名
	    		});
	    	}
	    });

	    $btn.on( 'click', function() {
	        if ( state === 'uploading' ) {
	            uploader.stop();
	        } else {
	            uploader.upload();
	        }
	    });
	    
	    
	});
    </script>
    

<script type="text/javascript">
	$(function() {

		//外部js调用,日期控件获取光标时候触发事件调用出日历
			laydate({
			elem : '#createtime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			event : 'focus' //响应事件。如果没有传入event，则按照默认的click
		});
		
		laydate({
			elem : '#strtime', 
			event : 'focus' 
		});
	
		laydate({
			elem : '#fintime', 
			event : 'focus' 
		});
	
		//正则表达式
		 $.validator.addMethod("checkPerson", function(value, element, param) {
				var pattern = /^[\u4e00-\u9fa5]{1,4}$/;
				return pattern.test(value);
			});
		 
		 $.validator.addMethod("checkNum", function(value, element, param) {
				var pattern = /^[0-9]{1}$/;
				return pattern.test(value);
			});
		 
		//使用jquery.validate 进行表单校验
		$("#taskForm").validate(
				{
					rules : {
						title : {
							required : true,
							remote : {
								url : "${ctx}/task.oas?cmd=checkTask", 
								type : "get", 
								dataType : "json", 
								data : {
									title : function() {
										return $("#title").val();
									}
								}
							}
				},
							content :"required",
						status : "checkNum",
						urgent :"checkNum",
						person : "checkPerson",
						dept : "checkNum",
						createtime : "required"
					},
					
					messages : {
						title : {
							required : "任务不能为空",
							remote : "任务已存在"
						},
						content : "内容不能为空",
						status : "请选择状态",
						urgent :"请选择紧急程度",
						person : "请输入正确人名",
						dept : "请选择部门",
						createtime:"创建时间不能为空"
					},
					
					submitHandler : function() {
						var formData = $("#taskForm").serialize();
						console.log(formData);
						$.post("${ctx}/task.oas?cmd=addTask", formData,
								function(data) {
									if (data.state == 1) {
										//使用layer插件进行弹框提示
										//墨绿深蓝风
										layer.alert(data.msg, {
										  skin: 'layui-layer-molv' //样式类名
										  ,closeBtn: 0
										}, function(index){
											layer.close(index);
											$("#taskForm")[0].reset();
											$("#newimg").remove();
											$("#thelist1").remove();
											
										});

									} else {
										layer.alert(data.msg, {
											  skin: 'layui-layer-molv' //样式类名
										});
									}
								});
					}
				});

		return;
	});
</script>


</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-8">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5 style="font-family: Microsoft YaHei;color: DarkGreen;font-size: 22px">新增任务</h5>
						<div class="ibox-tools">
							<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
							</a> <a class="dropdown-toggle" data-toggle="dropdown"
								href="form_basic.html#"> <i class="fa fa-wrench"></i>
							</a>
							<a class="close-link"> <i class="fa fa-times"></i>
							</a>
						</div>
					</div>
					<div class="ibox-content">
						<form class="form-horizontal" action="" method="post" id="taskForm" style="font-size: 16px">
						
						
							<div class="form-group" >
								<label class="col-sm-3 control-label"  >任务标题</label>
								<div class="col-sm-7">
									<input id="title" type="text" name="title" placeholder="任务标题"
										class="form-control" >
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">任务内容</label>
								<div class="col-sm-7">
									<input type="text" id="content" name="content" placeholder="任务内容"
										class="form-control" >
								</div>
							</div>
							
                          	<div class="form-group">
                          		<!-- div id; inp ty -------->
	      					    <label class="col-sm-3 control-label">内容附件</label>
	      					    <div class="col-sm-7">
									<div id="uploader" class="wu-example">
									    <!--用来存放文件信息-->
									    <div id="thelist1" class="uploader-list"></div>
									    <div class="btns" id="idcard_id1">
									        <div id="picker1">选择文件</div>
									        <!-- button如果不指定   type 为button 默认是submit -->
									        <button id="ctlBtn1" type="button" class="btn btn-default">开始上传</button>
									    </div>
									</div>
									<!-- 隐藏，存放图片 -->
									<input type="hidden" id="annex"  name="annex" />
							   </div>
   							</div>
							
							
							<div class="form-group">
								<label class="col-sm-3 control-label">任务状态</label>
								<div class="col-sm-7">
									<select class="form-control" id="status" name="status">
										<option value=-1 selected="selected">请选择</option>
										<option value=0>审核中</option>
										<option value=1>同意</option>
										<option value=2>拒绝</option>
								</select>
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">紧急程度</label>
								<div class="col-sm-7">
									<select class="form-control" id="urgent" name="urgent">
										<option value="-1" selected="selected">请选择</option>
										<option value="0">一般</option>
										<option value="1">紧急</option>
										<option value="2">重大</option>
									</select>
								</div>
							</div>
							
							
							<div class="form-group">
								<label class="col-sm-3 control-label">执行人员</label>
								<div class="col-sm-7">
									<input type="text" id="person" name="person" placeholder="执行人员"
										class="form-control" >
								</div>
							</div>
							
								<div class="form-group">
								<label class="col-sm-3 control-label">部门</label>
								<div class="col-sm-7">
								<select class="form-control" id="dept" name="dept">
								<option value="-1" selected="selected">请选择</option>
								<option value="1">人事部</option>
								<option value="2">商务部</option>
								<option value="3">软装部</option>
								</select>
								</div>
							</div>
					
					
							<div class="form-group">
								<label class="col-sm-3 control-label">任务创建时间</label>
								<div class="col-sm-7">
									<input id="createtime" name="createtime"
										class="laydate-icon form-control layer-date">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">处理开始时间</label>
								<div class="col-sm-7">
									<input id="strtime" name="strtime"
										class="laydate-icon form-control layer-date">
								</div>
							</div>
		
							<div class="form-group">
								<label class="col-sm-3 control-label">处理结束时间</label>
								<div class="col-sm-7">
									<input id="fintime" name="fintime"
										class="laydate-icon form-control layer-date">
								</div>
							</div>
						

							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button class="btn  btn-primary" type="submit">&nbsp;&nbsp;提&nbsp;&nbsp;交&nbsp;&nbsp;</button>
									<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									<button class="btn  " type="reset">&nbsp;&nbsp;重&nbsp;&nbsp;置&nbsp;&nbsp;</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>


	</div>


</body>

</html>
